<template>
  <load v-if="loadfull" class="loadcss"></load>
  <div class="pd" v-else>
    <el-table class="user-table" :data="orderlist.list" border fit highlight-current-row style="width:100%">
      <el-table-column label="序号" prop="number" width="100"></el-table-column>
      <el-table-column label="微信名称" prop="nick_name"></el-table-column>
      <el-table-column label="真实姓名" prop="buyer_name"></el-table-column>
      <el-table-column label="来源" prop="from" v-if="isform"></el-table-column>
      <el-table-column label="性别" prop="buyer_sex" width="70"></el-table-column>
      <el-table-column label="电话号码" prop="phone"></el-table-column>
      <el-table-column label="状态">
        <template scope="scope">
          <button type="button" class="el-button--small state-btn" :class="scope.row.statusClass"><span>{{scope.row.statusname}}</span></button>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
      <el-table-column label="测评题目">
        <template scope="scope">
          <p v-for="(item,index) in scope.row.tid" :key="index">#{{index}}.{{item}}</p>
        </template>
      </el-table-column>
      <el-table-column label="负责人" prop="principal"></el-table-column>
      <el-table-column label="ID" prop="id" width="70"></el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <i class="i-icon icon-check" @click="checkinfo(scope.row.id)"></i>
          <i class="i-icon icon-revamp" @click="revamp_s(scope.row.id, 'all', scope.row.nick_name, scope.row.statusname, scope.row.status)"></i>
          <i class="i-icon icon-code" @click="qcode(scope.row.qcode)"></i>
          <i class="i-icon icon-questionnaire" @click="questionnaire(scope.row.id)"></i>
          <i class="i-icon icon-delete" @click="del(scope.row.id, 'all')"></i>
        </template>
        <!--<template scope="scope">
          <i v-if="permission_ids.includes('orderCheck')" class="i-icon" :class="permission|isbtn('orderCheck')|icon" :title="permission|isbtn('orderCheck')|name" @click="checkinfo(scope.row.id)"></i>
          <i v-if="permission_ids.includes('orderEdit')" class="i-icon" :class="permission|isbtn('orderEdit')|icon" :title="permission|isbtn('orderEdit')|name" @click="revamp_s(scope.row.id, 'all', scope.row.nick_name, scope.row.statusname, scope.row.status)"></i>
          <i v-if="permission_ids.includes('orderQcode')" class="i-icon" :class="permission|isbtn('orderQcode')|icon" :title="permission|isbtn('orderQcode')|name"  @click="qcode(scope.row.qcode)"></i>
          <i v-if="permission_ids.includes('orderQuestionnaire')" class="i-icon" :class="permission|isbtn('orderQuestionnaire')|icon" :title="permission|isbtn('orderQuestionnaire')|name" @click="questionnaire(scope.row.id)"></i>
          <i v-if="permission_ids.includes('orderDel')" class="i-icon" :class="permission|isbtn('orderDel')|icon" :title="permission|isbtn('orderDel')|name"  @click="del(scope.row.id, 'all')"></i>
        </template>-->
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pageall"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="orderlist.total">
      </el-pagination>
    </div>
    <!--修改状态-->
    <el-dialog title="修改订单状态" :visible.sync="updatestatus">
      <div class="updatestatus">
        <p><label>微信名称：</label><span v-html="revamp.nickname"></span></p>
        <p><label>当前状态：</label><span v-html="revamp.status"></span></p>
        <p><label>修改状态：</label>
          <el-select v-model="st" placeholder="修改状态" class="user-input">
            <el-option
              v-for="item in status"
              :key="item.id"
              :label="item.value"
              :value="item.id"
              :disabled="revamp.sid!==1 && item.id===1"
              >
            </el-option>
          </el-select>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="abolish" :plain="true">取 消</el-button>
        <el-button type="primary"@click="q_revamp">确 定</el-button>
      </span>
    </el-dialog>
    <!--生成二维码-->
    <el-dialog title="生成二维码" :visible.sync="qcodeShow" size="tiny" class="qcode">
      <div v-if="qrcode.state !== 0" class="qrcodeselect">
        <el-select v-model="qrcodeId" placeholder="所属测评" class="user-input" @change="getcode">
          <el-option
            v-for="item in qrcode.list"
            :key="item[0]"
            :label="item[1]"
            :value="item[0]">
          </el-option>
        </el-select>
      </div>
      <div>
        <img :src="codeimg" style="width:280px;height:280px;">
        <p class="tip-note">营养师请不要扫此二维码，会导致系统错误。请将此二维码通过微信发送给您服务的用户</p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import config from '../../utils/config.js'
import axios from 'axios'
import crypt from '../../utils/crypto-helper-pkcs7'
import Vue from 'vue'
import load from '../../components/loading'
export default {
  data () {
    return {
      orderlist: [],
      nid: '',
      loading: true,
      pageall: 1,
      page: 1,
      pageSize: 20,
      isform: false,
      updatestatus: false,
      qcodeShow: false,
      revamp: {
        oid: '',
        nickname: '',
        status: '',
        type: '',
        sid: ''
      },
      status: [
        {
          'id': 1,
          'value': '未开始'
        },
        {
          'id': 2,
          'value': '进行中'
        },
        {
          'id': 3,
          'value': '中断'
        },
        {
          'id': 4,
          'value': '结束'
        }
      ],
      st: '',
      loadfull: true,
      qrcode: {},
      qrcodeId: '',
      codeimg: ''
    }
  },
  components: {
    load
  },
  created () {
    var cyclist = window.sessionStorage.getItem('cyclist')
    if (cyclist === true || cyclist === 'true') {
      this.page = window.sessionStorage.getItem('cyclistPage')
      this.pageall = this.page
    }
    this.getlist()
  },
  methods: {
    getlist () {
      var listparam = this.$route.query.list
      var type = this.$route.query.type
      var listp = listparam.replace(/ /g, '+')
      var pid = this.$route.params.pid
      var paramstring = crypt.decrypt(listp)
      var list = JSON.parse(paramstring)
      var param = {
        order_time: '',
        start_time: '',
        parent_id: '',
        principal: parseInt(pid),
        tid: '',
        from: '',
        phone: '',
        number: '',
        page: this.page,
        nick_name: '',
        order: list
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.orderlist + type + '/list?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          var resdata = response.data
          this.orderlist = resdata.list
          var list = resdata.list.list
          this.loadfull = false
          if (list.length > 0 && (list[0].from || list[0].from === '')) { // 内部or外部，内部显示来源， 外部不显示来源
            this.isform = true
          }
          list.forEach((item, index) => { // 添加状态和不同状态需要的class名称
            if (item.status === 1) {
              Vue.set(this.orderlist.list[index], 'statusname', '未开始')
              Vue.set(this.orderlist.list[index], 'statusClass', 'nostart')
            } else if (item.status === 2) {
              Vue.set(this.orderlist.list[index], 'statusname', '进行中')
              Vue.set(this.orderlist.list[index], 'statusClass', 'ing')
            } else if (item.status === 3) {
              Vue.set(this.orderlist.list[index], 'statusname', '中断')
              Vue.set(this.orderlist.list[index], 'statusClass', 'break')
            } else if (item.status === 4) {
              Vue.set(this.orderlist.list[index], 'statusname', '结束')
              Vue.set(this.orderlist.list[index], 'statusClass', 'over')
            }
          })
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    handleCurrentChange (val) {
      this.page = val
      this.getlist()
    },
    del (oid, status) {
      this.type = status
      var param = {
        id: oid
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      this.$confirm('确认要删除此条信息吗？')
      .then(_ => {
        axios.get(config.domain + config.urls.dellist + '?param=' + params)
        .then(res => {
          var response = res.data
          if (response.errcode === 200) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 1500
            })
            this.getlist()
          } else if (response.errcode === 200103) {
            this.$confirm('登录过期，请重新登录')
            .then(_ => {
              window.sessionStorage.clear()
              this.$router.push('/admin/login')
            })
            .catch(_ => {})
          } else {
            this.$notify({
              title: '失败',
              message: '删除失败',
              type: 'error',
              duration: 1500
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
      })
      .catch(_ => {})
    },
    qcode (qcode) {
      this.qrcode = qcode
      if (qcode.state === 0) {
        this.getcodeImg(qcode.url)
      } else {
        this.qrcodeId = qcode.list[0][0]
        this.getcode(this.qrcodeId)
        this.qcodeShow = true
      }
    },
    getcode (id) {
      var param = {
        appid: this.qrcode.appid,
        order_id: this.qrcode.oid,
        nutritionist_id: this.qrcode.principal,
        tid: id
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.getQrcode + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.qcodeShow = true
          var url = response.data.url
          this.getcodeImg(url)
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    getcodeImg (url) {
      axios.get('https://' + url)
        .then(res => {
          var response = res.data
          if (response.errcode === 200) {
            this.qcodeShow = true
            this.codeimg = 'https://' + response.data
          } else if (response.errcode === 200103) {
            this.$confirm('登录过期，请重新登录')
            .then(_ => {
              window.sessionStorage.clear()
              this.$router.push('/admin/login')
            })
            .catch(_ => {})
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    revamp_s (oid, type, nickname, status, sid) {
      this.updatestatus = true
      this.revamp.oid = oid
      this.revamp.type = type
      this.revamp.nickname = nickname
      this.revamp.status = status
      this.revamp.sid = sid
      this.st = ''
    },
    abolish () {
      this.updatestatus = false
    },
    q_revamp () { // 记录状态
      var param = {
        order_id: this.revamp.oid,
        original: this.revamp.sid,
        stauts: this.st
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.upstate + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.upstate()
        }
      })
    },
    upstate () { // 更改状态
      var param = {
        id: this.revamp.oid,
        status: this.st
      }
      this.type = this.revamp.type
      axios.post(config.domain + config.urls.update, param)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.updatestatus = false
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success',
            duration: 1500
          })
          this.getlist()
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
        this.$notify({
          title: '失败',
          message: '修改失败',
          type: 'error',
          duration: 1500
        })
      })
    },
    checkinfo (id) {
      window.sessionStorage.setItem('cyclistPage', this.page)
      this.$router.push('/admin/index/order/detail/' + id + '?tab=user')
    },
    questionnaire (id) {
      window.sessionStorage.setItem('cyclistPage', this.page)
      this.$router.push('/admin/index/order/detail/' + id + '?tab=questionnaire')
    }
  }
}
</script>
<style>
.splists {
  background: #f4f8f8;
  padding: 20px 0;
}
.splists li {
  width: 44%;
  margin: 6px 3%;
  border: 1px solid #ddd;
  color: #777;
  box-sizing: border-box;
  font-size: 0;
  padding: 10px 0;
}
.splists li span {
  display: inline-block;
  text-align: center;
  font-size: 16px;
}
.splists li .name {
  width: 25%;
}
.splists li .meal {
  width: 12%;
}
.splists li .time {
  width: 25%;
}
.splists li .type {
  width: 12%;
}
.splists li .sp-icon{
  width: 12%;
  font-size: 14px;
  cursor: pointer;
}
.splists li .el-icon-arrow-right{
  color: #20a0ff;
}
.no-data-tip {
  text-align: center;
  font-size: 16px;
  color: #000;
}
.pagination-container {
    margin-top: 30px;
}
.i-icon {
  display: inline-block;
  font-size: 16px;
  color: #666;
  margin: 0 1px;
}
.i-icon.icon-check {
  font-size: 18px;
}
.updatestatus{
  font-size: 16px;
  line-height: 2
}
.updatestatus span {
  font-weight: bold;
}
.user-table .over {
  background: #ccc;
  border: 1px  solid #ccc;
}
.user-table .state-btn {
  color: #fff;
  border-radius: 4px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.user-table .break{
  background: #f33;
  border: 1px  solid #f33;
}
.user-table .ing {
  background: #13ce66;
  border: 1px  solid #13ce66;
}
.user-table .nostart {
  background: #50bfff;
  border: 1px  solid #50bfff;
}
.qcode .el-dialog__body {
  text-align: center;
}

</style>

